<template>
  <div id="detail-box"> 
      <div class="sc-giImIA  d-box">
        <headerNav active="2" />
        <div class="d-contain-box">
          <div class="d-cont-left">
            <div  v-for="(item,index) in aduceList" :key="index" class="d-aduce-item">
              <div class="d-aduce-title">
                {{ item.typeName }}
              </div>
              <div :class="[ 'd-aduce-child' ,   aduceidx1 == index && aduceidx2 == idx ? 'd-active' : '' ]" v-for="(aduce,idx) in item.childList" :key="idx" @click="setIdx(index,idx)">
                {{ aduce.aduceName }}
              </div>
            </div>

          </div>
          <div class="d-cont-right">
            <div v-html="aduceList[aduceidx1].childList[aduceidx2].dec"></div>
          </div>
        </div>
      </div> 
  </div>
</template>

<script>
import headerNav from '@/components/headerNav'
export default {
  name: "home",
  components: {
    headerNav
  },
  data() {
    return {
      aduceidx1:0,
      aduceidx2:0,
     aduceList:[
       {
         typeName:'硬件产品',
         childList:[
            { aduceName:'智能润滑集群', dec:'6v锂电池供电,油杯容量有150ml和250ml两种规格,用户可根据设备运行工况自行设置多久加完油杯的润滑剂' },
            { aduceName:'齿轮箱', dec:'6v锂电池供电,油杯容量有150ml和250ml两种规格,用户可根据设备运行工况自行设置多久加完油杯的润滑剂' },
            { aduceName:'提升机', dec:'6v锂电池供电,油杯容量有150ml和250ml两种规格,用户可根据设备运行工况自行设置多久加完油杯的润滑剂' },
            { aduceName:'电机轴承', dec:'6v锂电池供电,油杯容量有150ml和250ml两种规格,用户可根据设备运行工况自行设置多久加完油杯的润滑剂' },

         ]
       },
       {
         typeName:'软件产品',
         childList:[
            { aduceName:'设备运维系统', dec:'6v锂电池供电,油杯容量有150ml和250ml两种规格,用户可根据设备运行工况自行设置多久加完油杯的润滑剂' },

         ]
       },
      
     ]
    };
  },
  mounted() {
   

  },
  created() {},
  filters: {},
  methods: {
   setIdx(idx1,idx2) {
     this.aduceidx1 = idx1;
     this.aduceidx2 = idx2;
   }
  },
};
</script> 
<style lang="less"  scoped>
#detail-box{
  min-height: 100vh;
  width: 100%;
  background: rgba(255 , 255, 255, .99);
  .d-contain-box{
    display: flex;
    min-width: 1400px;
    padding: 120px 80px 30px;
    .d-cont-left{
      box-shadow: var(--shadow-3);
      margin-right: 80px;
      border-radius: 12px;
      width: 340px;
      padding: 40px;
      height: auto;
      background: #fff;
      .d-aduce-item{
        margin-bottom: 20px;
        .d-aduce-title{
          font-weight: bold;
          margin-bottom: 20px;
        }
        .d-aduce-child{
          color: #888;
          text-indent: 2em;
          line-height: 30px;
          font-size: 14px;
          position: relative;
          // display: flex;
          // align-items: center;
          // justify-content: center;
          &.d-active{
            color: #333;
            font-weight: bold;

          }
          &.d-active::before{
            content: '';
            width: 8px ;
            height: 8px;
            border-radius: 4px;
            background: #333;
            position: absolute;
            left: 10px;
            top: 11px;

          }
        }
      }
    }
    .d-cont-right{
      box-shadow: var(--shadow-3);
      flex: 1;
      padding: 40px;
      box-sizing: border-box;
      border-radius: 12px;
      min-height: 500px;
      background: #fff;
    }
  }
}
  
</style>